<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}图书管理系统{% endblock %}</title>
    <link rel="icon" href="{{ url_for('static', filename='resources/title_login.png') }}" type="image/x-icon">
    <!-- 引入本地 Bootstrap CSS -->
    <link rel="stylesheet"  type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <!-- 引入本地 Bootstrap JavaScript 和依赖的 Popper.js -->
    <script src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    <!-- 自定义样式 -->
    <style>
        body {
            background-color: #f7f7f7;
        }
        /* 自定义导航栏样式 */
        .navbar-custom {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px; /* 调整高度 */
            background-color: #007bff; /* 背景颜色 */
            margin-bottom: 20px;
        }
        .navbar-custom a {
            text-decoration: none;
            color: white; /* 文本颜色 */
            font-size: 18px; /* 字体大小 */
            font-weight: bold;
            padding: 15px 30px; /* 内边距 */
            transition: all 0.3s ease; /* 过渡效果 */
        }
        .navbar-custom a:hover {
            color: black; /* 鼠标悬停时文本颜色 */
            border-bottom: 2px solid black; /* 底部边框 */
        }
        .navbar-custom a.active {
            font-size: 18px; /* 字体大小 */
            color: #007bff; /* 文本颜色 */
            font-weight: bold;
            background-color: #ffffff; /* 背景颜色 */
            border-bottom: 2px solid #007bff;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar-custom">
        <!-- <a href="/login">首页</a> -->
        <a href="/bookinfo" {% if active_page == 'bookinfo' %} class="active" {% endif %}>书籍信息</a>
        <a href="/user" {% if active_page == 'user' %} class="active" {% endif %}>用户信息</a>
    </nav>
    <!-- 继承页面的内容 -->
    {% block content %}
    {% endblock %}
</body>
</html>